import { Component, OnInit, OnDestroy } from '@angular/core';
import { PetTag, initialTag } from '../../core/pet-tag.model';
import { Observable } from 'rxjs/Observable';
import { Subscription } from 'rxjs/Subscription';
import { Store } from '@ngrx/store';
import { SELECT_SHAPE, SELECT_FONT, ADD_TEXT, TOGGLE_CLIP, TOGGLE_GEMS, COMPLETE, } from '../../core/pet-tag.actions';

@Component({
  selector: 'app-create',
  templateUrl: './create.component.html',
  styleUrls: ['./create.component.css']
})
export class CreateComponent implements OnInit, OnDestroy {

  tagState$: Observable<PetTag>;
  private tagStateSubscription: Subscription;
  petTag: PetTag = initialTag;
  done = false;

  constructor(private store: Store<{ petTag: PetTag }>) {
    this.tagState$ = store.select(
      s => {
        return s.petTag;
      });
  }

  ngOnInit() {
    this.tagStateSubscription = this.tagState$.subscribe((state: PetTag) => {
      this.petTag = state;
      this.done = !!(this.petTag.shape && this.petTag.text);
      console.log(state.shape);

    });
  }

  ngOnDestroy(): void {
    this.tagStateSubscription.unsubscribe();
  }
  selectShapeHandler(shape: string) {
    this.store.dispatch({
      type: SELECT_SHAPE,
      payload: shape
    });
  }

  selectFontHandler(fontType: string) {
    this.store.dispatch({
      type: SELECT_FONT,
      payload: fontType
    });
  }

  addTextHandler(text: string) {
    this.store.dispatch({
      type: ADD_TEXT,
      payload: text
    });
  }

  toggleClipHandler() {
    this.store.dispatch({
      type: TOGGLE_CLIP
    });
  }

  toggleGemsHandler() {
    this.store.dispatch({
      type: TOGGLE_GEMS
    });
  }

  submit() {
    this.store.dispatch({
      type: COMPLETE,
      payload: true
    });
  }
}
